<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			.button {
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 27%;
    cursor: pointer;
}

		</style>
		<div class="button">点击</div>
		<script type="text/javascript">
			/*head.onClick = function(){console.log('onclick')}
			function(){console.log('onclick')}
			head.addEventListener('click',function(){console.log('click EventListener');},false)
			undefined
			head.click()
			onclick
			click EventListener
			underfined
			head.addEventListener('dblclick',function(){console.log('dblclick EventListener');},false)
			undefined
			head.ondblclick = function(){console.log('ondblclick')}
			function (){console.log('ondblclick')}
			head.dblclick()
			Uncaught TypeError:head.dblclick is not a function(...)
			var e = document.createEvent('HTMLEvents');
			undefined
			e.initEvent('dblclick,true,true');
			undefined
			head.dispatchEvent(e)
			dblclick EventListener
			ondblclick
			true*/
			
			var div = document.querySelector("div");
			var count = 0;
			div.addEventListener('click',function(){
				count++;
				setTimeout(function(){
					if (count ===1){
				console.log('单击效果');
				}
					
					if (count ===2){
						console.log('双击效果');
					}
				count = 0;
				},300);
			},false);
		</script>
		
	</body>
</html>
